<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta charset="UTF-8">
        <title>网络请求</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper img{
            width: 100%;
            height: 238px;
        }
        .swiper {
            width: 100%;
            overflow: hidden;
            position: relative;
            z-index: -1;
        }
        #wrap{
            width: 100%;
        }
        nav{
            display: flex;
            position: relative;
            height: 45px;
        }
        .hed{
            position: sticky;
            top: 0;
            background-color: white;
        }
        .xia{
            position: absolute;
            right: 2%;
            bottom: 15%;
        }

        nav span{
            height: 45px;
            line-height: 45px;
            margin: auto;
            font-size: 18px;
        }
        .logo{
            position: absolute;
            left: 2%;
            line-height: 45px;
        }
        .yin{
            width: 100%;
            height: 350px;
            position: fixed;
            left: 0;
            top: 45px;
            z-index: 99;
            display: none;
        }
        .yin.show{
            display: block;

        }
        .yin span{
            display: block;
            font-size: 14px;
            height: 20px;
        }
        .yin a{
            color: #2d8cf0;
            text-decoration: none;
            outline: 0;
            cursor: pointer;
            font-size: 14px;
            margin-right: 15px;
            display: inline-block;
            margin-top: 15px;
        }

        .yin p{
            height: 45px;
            padding: 5px;
            margin-left: 15px;
        }
        .bei{
            position: fixed;
            top: 45px;
            left: 0;
            width: 100%;
            background: #000;
            opacity: .3;
            z-index: 5;
            height: 100%;
        }
        .pp{
            width: 100%;
            height: 350px;
            background-color: white;
            border:2px solid #eee;
            position: fixed;
            left: 0;
            top: 45px;
            z-index: 99;
        }
        .jia{
            height: 81px;
            width: 100%;

        }
        .tu{
            font-size: 26px;
            border-bottom: 2px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
        }
        .tu img{
            width: 26px;
            height: 23px;
        }
        .tu p{
            font-size: 16px;
        }
        .txt{
            margin-top: 30px;
        }
        .tu a{
            text-decoration: none;
            color: black;
        }
        .txt span{
            margin-left: 10px;
            font-size: 16px;
            color: #666;
        }

        .txt-tu{
            display: flex;
            justify-content: space-around;
            text-align: center;
            padding: 15px 0;
            border-bottom: 2px solid #eee;
        }
        .txt-tu img{
            width: 45px;
            height: 45px;
        }
        .txt-tu p{
            text-align: center;
            font-size: 14px;
        }
        .txt-max{
            margin-left: 15px;
            padding-top: 5px;

        }
        .ke-txt span{
            margin-left: 10px;
            font-size: 16px;
            color: #666;
        }
        .ke-txt{
            margin-top: 15px;
        }
        .txt-div{
            margin-top: 15px;
            width: 100%;
            display: flex;
            height: 120px;
        }
        .txt-left{
            width: 33%;
            height: 120px;
            background-image: url("http://m.ostcn.com/static/img/course-ab.786ed16.png");
            background-size:cover
            /*background-image: ;*/
        }
        .txt-rigth{
            width: 33%;
            height: 120px;
            background-image: url("http://m.ostcn.com/static/img/course-star.324ce5b.png");
            background-size:cover
        }
        .txt-div img{
            width: 40px;
            height: 40px;
            margin-top: 15px;
            padding: 0 50px;
        }
        .dddd{
            text-align: center;
            color: #c4ec86;
        }

        .foot{
            background: #d5d1d1;
            margin-top: 15px;
            height: 45px;
            line-height: 45px;
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }
        .foot p{
            color: #39f;
            line-height: 45px;
        }
        .foot-di{
            position: sticky;
            background-color: white;
            bottom: 0;
            zoom: 1;
            display: block;
        }

        .bar{
            display: flex;
        }
        .bar li{
            list-style: none;
        }
    </style>
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <script src="swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div id="wrap">
<div class="hed">
    <nav>
        <img class="logo" src="swiper/img.png" alt="" width="42" height="42">
        <span>东方启音</span>
        <img class="xia" src="swiper/下拉.png" alt="" width="30" height="30">
        <div class="yin" >
            <div class="bei"></div>
            <div class="pp">
                <p>
                    <span>关于我们</span>
                    <a href="http://m.ostcn.com/about/company" class="">简介</a>
                    <a href="http://m.ostcn.com/about/history" class="">大事记</a>
                    <a href="http://m.ostcn.com/about/team" class="">团队</a>
                </p>
                <p>
                    <span>服务群体</span>
                    <a href="http://m.ostcn.com/subject/a" class="">儿童言语发展</a>
                    <a href="http://m.ostcn.com/subject/b" class="">儿童言语训练</a>
                    <a href="http://m.ostcn.com/subject/c" class="">成人言语康复</a>
                </p>
                <p><span>特色课程</span>
                    <a href="http://m.ostcn.com/course" class="">STAR课程</a>
                    <a href="http://m.ostcn.com/course" class="">AB课程</a>
                </p>
                <p>
                    <span>新闻活动</span>
                    <a href="http://m.ostcn.com/news/a" class="">公司新闻</a>
                    <a href="http://m.ostcn.com/news/b" class="">言语科普</a>
                    <a href="http://m.ostcn.com/news/c" class="">公司活动</a>
                </p>
                <p><span>联系合作</span>
                    <a href="http://m.ostcn.com/linkup/us" class="">联系我们</a>
                    <a href="http://m.ostcn.com/linkup/join" class="">加入我们</a>
                    <a href="http://m.ostcn.com/linkup/address" class="">中心地址</a>
                </p>
                <p><span>口碑</span>
                    <a href="http://m.ostcn.com/case" class="">成功案例</a></p>
            </div>
        </div>
    </nav>
</div><!--头部-->
<div class="swiper">
    <div class="swiper-wrapper">
    </div>
</div>                  <!--轮播图-->
<div class="jia">
    <div class="tu">
        <div>
            <a href="http://m.ostcn.com/about/company"> <img src="swiper/简介.png" alt=""><p>简介</p></a>
        </div>
        <div>
            <a href="http://m.ostcn.com/about/team"><img src="swiper/找专家.png" alt=""><p>专家</p></a>
        </div>
        <div>
            <a href="http://m.ostcn.com/case"><img src="swiper/案例.png" alt=""><p>案例</p></a>
        </div>
        <div>
            <a href="http://m.ostcn.com/linkup/us"><img src="swiper/咨询.png" alt=""><p>联系</p></a>
        </div>
    </div>
</div>                     <!--简介那列-->
<div class="yan">
    <div class="txt">
        <img class="txt-max" src="swiper/c.png" height="15" width="15" alt=""><span>言语康复服务群体</span>
        <div class="txt-tu">
            <div class="ert">
                <img src="swiper/儿童.png" alt="">
            </div>
            <div class="ert">
                <img src="swiper/医疗包.png" alt="">
            </div>
            <div class="ert">
                <img src="swiper/化验.png" alt="">
            </div>
        </div>
    </div>
</div>                                   <!--言语康复-->
<div class="ke">
        <div class="ke-txt">
            <img class="txt-max" src="swiper/c.png" height="15" width="15" alt=""><span>课程</span>
            <div class="txt-div">
                <div class="txt-left tup" >
                    <img src="swiper/书本.png" alt="">
                </div>
                <div class="txt-rigth tup">
                    <img src="swiper/五角星.png" alt="">
                </div>
                <div class="txt-left tup">
                    <img src="swiper/书本.png" alt="">
                </div>

            </div>
        </div>
    </div>

<div class="xin">
    <ul class="bar">
        <li onclick="getnews">新闻</li>
        <li>专业科普</li>
    </ul>
</div>

<div class="foot">
    <p>粤ICP备11022524号-9</p>
</div>
<div class="foot-di">
        <div class="tu">
            <div>
                <a href="http://m.ostcn.com/"> <img src="swiper/首页.png" alt=""><p>首页</p></a>
            </div>
            <div>
                <a href="http://m.ostcn.com/"><img src="swiper/找专家.png" alt=""><p>资讯</p></a>
            </div>
            <div>
                <a href="http://m.ostcn.com/yuyue"><img src="swiper/预约.png" alt=""><p>预约</p></a>
            </div>
            <div>
                <a href="http://m.ostcn.com/news/c"><img src="swiper/礼物%20活动.png" alt=""><p>活动</p></a>
            </div>
        </div>
    </div>
</div>
<script>
    let sw=document.querySelector('.swiper-wrapper')
    let xhr=new XMLHttpRequest()                                        //创建请求对象
    xhr.open('GET','http://47.116.75.38:8101/front/carousel')          //连接请求
    xhr.send(null)                                                    //发送请求
    xhr.onload=function () {
        let data = JSON.parse(xhr.response).data.records
        data.forEach(function (item) {
            let div = document.createElement('div')
            div.className = 'swiper-slide'
            let img = document.createElement('img')
            img.src = item.image
            div.appendChild(img)
            sw.appendChild(div)
        })
            let mySwiper = new Swiper('.swiper', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay: true,
            })
        }
        let xia = document.querySelector('.xia')
        let yin = document.querySelector('.yin')

        xia.onclick = function () {
            yin.classList.toggle('show')
    }

    let ert = document.querySelectorAll('.ert')
    let xhr1 = new XMLHttpRequest()                                        //创建请求对象
    xhr1.open('GET','http://47.116.75.38:8101/front/getService')          //连接请求
    xhr1.send(null)                                                    //发送请求
    xhr1.onload = function () {
        let aaa = JSON.parse(xhr1.response).data
        aaa.forEach(function (item,index) {
            let p = document.createElement('p')
            p.innerText = item.dictName
            ert[index].appendChild(p)
        })
    }


    let tup = document.querySelectorAll('.tup')
    let xhr2 = new XMLHttpRequest()                                        //创建请求对象
    xhr2.open('GET','http://47.116.75.38:8101/front/getCourseCls')          //连接请求
    xhr2.send(null)                                                    //发送请求
    xhr2.onload = function () {
        let ddd = JSON.parse(xhr2.response).data
        ddd.forEach(function (item,index) {
            let p=document.createElement('p')
            p.innerText=item.dictLabel
            tup[index].append(p)
            p.className='dddd'
        })
    }
     //


    function getnews(){
        let xhr3=new XMLHttpRequest()
        //一般get请求传参数，放在地址上传递过去
        // (地址栏，路径，查询字符串，query)
        //参数名称resourceClass加值  'xwzx'  '专业科普'

        xhr3.open('get','http://47.116.75.38:8101//front/pageList?resourceClass=zxhd')
        xhr3.send()
        xhr3.onload=function (){
            console.log(JSON.parse(xhr3.response))
        }

    }

    let bar=document.querySelector('.bar')
</script>
</body>
</html>